<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <canvas id="canvas"></canvas>

  <script>

    function drawRect() {
      const canvas = document.getElementById('canvas');
      // 获取渲染上下文
      const ctx = canvas.getContext('2d');
      // ctx.fillStyle = 'green';
      // 填充矩形
      ctx.fillRect(10, 10, 200, 100);
      // 绘制一个矩形的边框
      ctx.strokeRect(10, 10, 200, 100);
      // 清除指定矩形区域，让清除部分完全透明。
      ctx.clearRect(50, 50, 50, 50);
    }

    // 绘制路径
    // beginPath()
    // 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
    // closePath()
    // 闭合路径之后图形绘制命令又重新指向到上下文中。
    // stroke()
    // 通过线条来绘制图形轮廓。
    // fill()
    // 通过填充路径的内容区域生成实心的图形。

    function drawTriangle() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(10, 10);
      ctx.lineTo(110, 10);
      ctx.lineTo(60, 60);
      ctx.closePath();
      // 描线
      ctx.stroke();
      // 填充
      // ctx.fill();

    }

    // drawTriangle();

    // 绘图
    // 线 ： 绘制一条从当前位置到指定x以及y位置的直线。（开始点也可以通过moveTo()函数改变）
    // lineTo(x, y)

    // 圆弧
    // 绘制圆弧或者圆，我们使用arc()方法。当然可以使用arcTo() ，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。
    // arc(x, y, radius, startAngle, endAngle, anticlockwise)
    // 画一个以（x, y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
    // arcTo(x1, y1, x2, y2, radius)
    // 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。


    function drawSmile() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
        ctx.moveTo(110, 75);
        ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
        ctx.moveTo(65, 65);
        ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
        ctx.moveTo(95, 65);
        ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
        ctx.stroke();
      }
    }


    // 二次贝塞尔曲线及三次贝塞尔曲线
    // 下一个十分有用的路径类型就是贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
    // quadraticCurveTo(cp1x, cp1y, x, y)
    // 绘制二次贝塞尔曲线，cp1x, cp1y为一个控制点，x, y为结束点。
    // bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    // 绘制三次贝塞尔曲线，cp1x, cp1y为控制点一，cp2x, cp2y为控制点二，x, y为结束点。
    // 右边的图能够很好的描述两者的关系，二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），而三次贝塞尔曲线有两个控制点。
    // 参数x、y在这两个方法中都是结束点坐标。cp1x, cp1y为坐标中的第一个控制点，cp2x, cp2y为坐标中的第二个控制点。
    // 使用二次以及三次贝塞尔曲线是有一定的难度的，因为不同于像Adobe Illustrators这样的矢量软件，我们所绘制的曲线没有给我们提供直接的视觉反馈。这让绘制复杂的图形变得十分困难。在下面的例子中，我们会绘制一些简单有规律的图形，如果你有时间以及更多的耐心, 很多复杂的图形你也可以绘制出来。
    // 下面的这些例子没有多少困难。这两个例子中我们会连续绘制贝塞尔曲线，最后形成复杂的图形。

    function drawCurve() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        // 二次贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(75, 25);
        ctx.quadraticCurveTo(25, 25, 25, 62.5);
        ctx.quadraticCurveTo(25, 100, 50, 100);
        ctx.quadraticCurveTo(50, 120, 30, 125);
        ctx.quadraticCurveTo(60, 120, 65, 100);
        ctx.quadraticCurveTo(125, 100, 125, 62.5);
        ctx.quadraticCurveTo(125, 25, 75, 25);
        ctx.stroke();
      }
    }


    function drawCurve2() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        //三次贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(75, 40);
        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
        ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
        ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
        ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
        ctx.fillStyle = "red";
        ctx.fill();
      }
    }

    // 封装的一个用于绘制圆角矩形的函数.

    function roundedRect(ctx, x, y, width, height, radius) {
      ctx.beginPath();
      ctx.moveTo(x, y + radius);
      ctx.lineTo(x, y + height - radius);
      ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
      ctx.lineTo(x + width - radius, y + height);
      ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
      ctx.lineTo(x + width, y + radius);
      ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
      ctx.lineTo(x + radius, y);
      ctx.quadraticCurveTo(x, y, x, y + radius);
      ctx.stroke();
    }

    function drawRoundRect() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      roundedRect(ctx, 0, 0, 300, 150, 30);
      ctx.fill();
    }
    // drawSmile();
    // drawCurve2();
    // drawRoundRect();


    function drawFillStyle() {
      var ctx = document.getElementById('canvas').getContext('2d');
      // 设置透明度值
      ctx.globalAlpha = 0.2;
      let count = 0;
      for (let i = 0; i < 6; i++) {
        for (let j = 0; j < 6; j++) {
          for (let k = 0; k < 6; k++) {
            ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
              Math.floor(255 - 42.5 * j) + ','+ Math.floor(255 - 42.5 * k)+')';
              count ++;
              let row = Math.floor(count/10);
              let cloumn =  count % 10;
              ctx.fillRect(row * 25, cloumn * 25, 25, 25);
          }
        }
      }
    }

    drawFillStyle();

  </script>

  <!-- <script src="./index.js"></script> -->

</body>

</html>